<template>
  <div class="main">
    <div class="home">
      <div class="home_content">
        <div class="home_describe">
          <h2>Welcome To</h2>
          <h2>FPCMS后台管理系统</h2>
        </div>
        <div class="banner">
          <img src="../assets/image/test10.jpeg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>
<style  lang='less' scoped>
.main {
  box-sizing: border-box;
  display: flex;
  background-color: #eef1f2;
  overflow: hidden;
  padding: 15px;
  .home {
    // width: calc(~"100vw - 250px");
    // height: calc(~"100vh - 80px");
    // 根据父盒子的高度 就是自动占满的高度 来对子元素进行变化
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #eef1f2;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    //  文字部分
    .home_content {
      display: grid;
      justify-self: center;
      align-items: center;
      grid-template-columns: 40% 60%;
      background-color: #fff;
      width: 100%;
      height: 100%;
      // border: 10px solid #eef1f2;

      .home_describe {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 1fr 6fr;
        justify-items: start;
        align-items: start;
        padding-top: 220px;
        padding-left: 100px;
        h2 {
          font-size: 34px;
          color: #2f5664;
          font-weight: 700;
          letter-spacing: 1px;
          margin-top: 15px;
          flex-wrap: wrap;
        }
      }
      // 图片部分
      .banner {
        img {
          width: 640px;
          height: 488px;
          object-fit: cover;
        }
      }
    }
  }
}
</style>